<template>
  <div class="list-container">
    <h2>热卖单品</h2>
    <ul>
      <li v-for="(item, index) in item_list" :key="index">
        <nuxt-link to="#">
          <img :src="item.url">
          <p>{{ item.title }}</p>
        </nuxt-link>
        <div class="duration">
          <span>评价:888</span>
          <span>收藏:195</span>
        </div>
        <div class="sell">
          <span>￥98</span>
          <span>月销1097笔</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      item_list: [
        {
          title: '超轻薄便携15.6英寸学生商务上网办公笔记本',
          url: 'imgs/bimg1.jpg'
        }, {
          title: 'Asus/华硕 灵耀Deluxe14',
          url: 'imgs/bimg2.jpg'
        }, {
          title: '电脑包女手提可爱小清新文艺笔记本电脑包',
          url: 'imgs/bimg3.jpg'
        }, {
          title: '苹果7耳机转接头iphone7/8/pl手机数据线',
          url: 'imgs/bimg4.jpg'
        }, {
          title: '华硕悟空E402笔记本电脑女性定位14英寸超薄',
          url: 'imgs/bimg5.jpg'
        }, {
          title: 'HP/惠普 星14S 青春版 轻薄学生笔',
          url: 'imgs/bimg6.jpg'
        }, {
          title: 'wiwu雷电2拓展坞minidp转hdm',
          url: 'imgs/bimg7.jpg'
        }, {
          title: '车载手机支架汽车用可伸缩磁铁吸附磁力吸盘',
          url: 'imgs/bimg8.jpg'
        }, {
          title: '笔记本手提14女电脑包男15.4寸笔记本电脑包',
          url: 'imgs/bimg9.jpg'
        }, {
          title: '全新14寸WIN7笔记本电脑学生便携轻薄',
          url: 'imgs/bimg10.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.list-container
  overflow hidden
  h2
    margin 15px 0
  li
    padding 20px 10px 5px 10px
    border 1px solid #fff
    width 18%
    float left
    height 348px
    a
      color #95a5a6
    .duration
      margin 10px 0
      span
        margin-right 10px
        color #bdc3c7
    .sell
      color #e67e22
      overflow hidden
      font-size 20px
      line-height 25px
      span
        &:last-child
          color #bdc3c7
          float right
          font-size 14px
    &:hover
      border 1px solid #e74c3c
  img
    height 204px
    width 204px
</style>
